<template>
	<view>
		<!-- 规格弹窗 -->
		<up-popup v-model:show="showg" closeable round="20rpx">
			<view>
				<view class="w-1 fl-s-s p-30">
					<view class="w-1 fr-s-c" style="padding-bottom: 10rpx;">
						<view class="relative fr-e-s br-20 o-h" style="padding: 6rpx; width: 168rpx; height: 168rpx;">
							<image class="absolute-0 w-1 h-1" :src="$dimg(info.image)" mode="aspectFill"></image>
						</view>
						<view class="m-l-30 flex-1 fl-a-s" style="height: 168rpx;">
							<text class="text-line-1 c-33 fs-32 bold">{{info.title}}</text>
							<view class="c-price">
								<text class="fs-28">￥</text>
								<text class="fs-36 bold">{{info.price}}</text>
								<!-- <text class="c-main fs-28 bold"></text> -->
							</view>
							<!-- <text class="c-66 fs-30 m-t-25">{{skutarr.length?skutarr.join('、'):'请选择'}}</text> -->
							<!-- <text class="c-99 fs-24">库存：{{info.stock}}件</text> -->
						</view>
					</view>
					<scroll-view scroll-y="true" class="w-1" style="max-height: 55vh;" >
						<view class="fl-s-s w-1" v-for="(item,index) in skuarr" :key="index">
							<text class="c-33 fs-32 bold m-t-30 m-b-10">{{item.attr_name}}</text>
							<view class="fr-s-s warp w-1">
								<block v-for="(items,indexs) in item.attr_values" :key="indexs">
									<view class="slabel fr-c m-t-20 m-r-20" @click="chooseIndex(index,indexs)" :class="item.index==indexs?'lact':''" >
										<text class="text-line-1">{{items}}</text>
									</view>
								</block>
							</view>
						</view>
					</scroll-view>
				</view>
				<!-- <view class="w-1 bb-solid"></view> -->
				<view class="w-1 fl-s-c" style="padding: 25rpx 30rpx;">
					<view class="w-1 fr-b-c">
						<view class="fr-s-c">
							<text class="c-33 fs-28 bold">购买数量</text>
							<!-- <text class="c-66 fs-26 m-l-20">限购10件</text> -->
						</view>
						<up-number-box :min="0" integer buttonSize="42rpx" bgColor="#ffffff" inputWidth="80rpx" v-model="nums">
							<template #minus>
								<view class="minus">
									<image style="width: 52rpx; height: 52rpx;" src="/static/images/tab2/minus.png" mode=""></image>
								</view>
							</template>
							<template #plus>
								<view class="plus">
									<image style="width: 52rpx; height: 52rpx;" src="/static/images/tab2/plus.png" mode=""></image>
								</view>
							</template>
						</up-number-box>
					</view>
					<view class="w-1 fr-c m-t-20">
						<block v-if="typeg==0">
							<view @click="addcart" class="addcard bg-main fr-c">加入购物车</view>
							<view @click="tosub" class="suborder bg-main fr-c m-l-30">立即下单</view>
						</block>
						<!-- 加入购物车 -->
						<view v-if="typeg==1" @click="addcart" class="addcard fr-c bg-main" style="width: 100%; font-size: 32rpx; border-radius: 48rpx;">加入购物车</view>
						<!-- 下单 -->
						<view v-if="typeg==2" @click="tosub" class="suborder fr-c bg-main" style="width: 100%; font-size: 32rpx; border-radius: 48rpx;">确定</view>
					</view>
				</view>
			</view>
		</up-popup>
	</view>
</template>

<script setup>
	function ditems(items,n){
		if(items){
			return (String(items).split('@'))[n]
		}else{
			return ''
		}
	}
	function previewImage(current,urls){
		uni.previewImage({
			current,urls
		})
	}
	import { watchEffect } from 'vue';
	const props = defineProps({
		info:{
			// type:Object,
			default:()=>{}
		},
		sinfo:{
			// type:Object,
			default:()=>{}
		},
		skuarr:{
			default:()=>[]
		}
	})
	const emits = defineEmits(['sub','changetarr'])
	// const skuarr = ref([])
	const {info,sinfo,skuarr} = toRefs(props)
	// watchEffect(()=>{
	// 	let arr = []
	// 	if(info.value.skuons){
	// 		for(let i in info.value.skuons){
	// 			arr.push({
	// 				name:i,
	// 				index:-1,
	// 				child:info.value.skuons[i].split(',').map(item=>item={name:item})
	// 			})
	// 		}
	// 	}
	// 	skuarr.value = arr;
	// })
	function chooseIndex(cur,indexs){
		console.log(cur,indexs)
		skuarr.value[cur].index = indexs;
		// console.log(skuarr.value)
		getprice()
	}
	const skutarr = computed(()=>{
		let arr = []
		skuarr.value.map(item=>{
			if(item.index!=-1){
				arr.push(ditems(item.attr_values[item.index],0))
			}
		})
		emits('changetarr',arr)
		return arr;
	})
	
	function getprice(){
		uni.$post({
			url:'/api/goods/swgoodsskuprice',
			data:{
				aid:info.value.id,
				sku:skutarr.value.join('_')
			}
		}).then(res=>{
			info.value.price = res.data;
		})
	}
	
	
	function addcart(){
		if(skuarr.value.length != skutarr.value.length) return uni.$u.toast('请选择商品规格');
		
		uni.$post({
			url:'/api/goods/add_to_cart',
			data:{
				aid:info.value.id,
				skuons:skutarr.value.join('_'),
				nums:nums.value,
				shopid:info.value.adminid
			}
		}).then(res=>{
			uni.$tt(res.msg,'success');
			showg.value = false;
		})
	}
	
	
	const showg = ref(false);
	const typeg = ref(0)
	const nums = ref(1)
	defineExpose({
		showg,
		typeg,
		skutarr
	})
	
	function tosub(){
		if(skuarr.value.length != skutarr.value.length) return uni.$u.toast('请选择商品规格');
		let form = {
			aid:info.value.id,
			num:nums.value,
			sku:skutarr.value.join('_'),
			price:info.value.price
		}
		uni.$to('/pages/index/SubOrder?form='+encodeURIComponent(JSON.stringify(form)))
	}
</script>

<style>
	.addcard {
		width: 306rpx;
		height: 96rpx;
		border-radius: 48rpx;
		/* background: linear-gradient(to right, #FFCA00, #FE9203); */
		color: #ffffff;
		font-size: 30rpx;
		font-weight: bold;
	}

	.suborder {
		width: 306rpx;
		height: 96rpx;
		border-radius: 48rpx;
		/* background: #e24700; */
		color: #ffffff;
		font-size: 30rpx;
		font-weight: bold;
	}
	
	
	
	.slabel{
		font-size: 24rpx;
		color: #242629;
		min-width: 216rpx;
		padding: 0 60rpx;
		height: 68rpx;
		background: #FFFFFF;
		border-radius: 34rpx 34rpx 34rpx 34rpx;
		border: 2rpx solid #E9E9E9;
	}
	
	.lact{
		background: #D4E3E2;
		border: 2rpx solid #01796D;
		color: #01796D;
	}
	
	
</style>